<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="outTradeNo" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input
                        style="width: 50%"
                        v-model="typeTexts"
                        allow-clear
                        placeholder="请输入搜索条件"
                      >
                        <!-- <template #suffix>
                          <icon-plus @click="open(0)" style="cursor: pointer" /> </template
                      > -->
                      </a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="srcUserId" hide-label>
                    <a-select
                      v-model="form.srcUserId"
                      placeholder="请选择客户"
                      allow-clear
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select
                      v-model="form.type"
                      placeholder="请选择支付途径"
                      allow-clear
                      allow-search
                    >
                      <a-option :value="0">支付宝</a-option>
                      <a-option :value="1">微信</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <!-- multiple 多选-->
                    <a-select
                      v-model="form.state"
                      placeholder="请选择换卡状态"
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option value="0">等待审核</a-option>
                      <a-option value="1">正在审核</a-option>
                      <a-option value="2">审核成功</a-option>
                      <a-option value="3">审核驳回</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="srcChannelId " hide-label>
                    <!-- <a-select
                      v-model="form.srcChannelId"
                      placeholder="请选择渠道"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select> -->
                    <a-tree-select
                      v-model="form.srcChannelId"
                      :allow-search="true"
                      :allow-clear="true"
                      :tree-checkable="false"
                      :tree-check-strictly="false"
                      :data="channel"
                      :filter-tree-node="useCommon.filterTreeNode"
                      placeholder="请选择旧渠道"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="srcSeriesId" hide-label>
                    <a-select
                      v-model="form.srcSeriesId"
                      placeholder="请选择旧系列"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="newChannelId" hide-label>
                    <!-- <a-select
                      v-model="form.newChannelId"
                      placeholder="请选择新渠道"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select> -->
                    <a-tree-select
                      v-model="form.newChannelId"
                      :allow-search="true"
                      :allow-clear="true"
                      :tree-checkable="false"
                      :tree-check-strictly="false"
                      :data="channel"
                      placeholder="请选择新渠道"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="newSeriesId" hide-label>
                    <a-select
                      v-model="form.newSeriesId"
                      placeholder="请选择新系列"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="addApplyTime" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFns"
                        v-model="typeTime"
                        placeholder="first"
                      >
                        <a-option
                          v-for="item in typeListTime"
                          :key="item.name"
                          :value="item.value"
                          >{{ item.name }}</a-option
                        >
                      </a-select>
                      <a-date-picker
                        style="width: 100%"
                        v-model="time1"
                        show-time
                        placeholder="请选择开始时间"
                        :time-picker-props="{ defaultValue: '12:00:00' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        allow-clear
                        :shortcuts="[
                          {
                            label: '今日',
                            value: () => (
                              (time1 = $dayjs('00:00:00', 'HH:mm:ss').format(
                                'YYYY-MM-DD HH:mm:ss'
                              )),
                              (time2 = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                            ),
                          },
                          {
                            label: '昨日',
                            value: () => (
                              (time1 = $dayjs('00:00:00', 'HH:mm:ss')
                                .subtract(1, 'day')
                                .format('YYYY-MM-DD HH:mm:ss')),
                              (time2 = $dayjs('23:59:59', 'HH:mm:ss')
                                .subtract(1, 'day')
                                .format('YYYY-MM-DD HH:mm:ss'))
                            ),
                          },
                          {
                            label: '七日',
                            value: () => (
                              (time1 = $dayjs('00:00:00', 'HH:mm:ss')
                                .subtract(6, 'day')
                                .format('YYYY-MM-DD HH:mm:ss')),
                              (time2 = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                            ),
                          },
                          {
                            label: '本月',
                            value: () => (
                              (time1 = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                'YYYY-MM-DD HH:mm:ss'
                              )),
                              (time2 = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                            ),
                          },
                          {
                            label: '上月',
                            value: () => (
                              (time1 = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                .subtract(1, 'month')
                                .format('YYYY-MM-DD HH:mm:ss')),
                              (time2 = $dayjs()
                                .subtract(1, 'month')
                                .endOf('month')
                                .format('YYYY-MM-DD HH:mm:ss'))
                            ),
                          },
                        ]"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="time2"
                      show-time
                      placeholder="请选择结束时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (time1 = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                            (time2 = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (time1 = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (time2 = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (time1 = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (time2 = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (time1 = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (time2 = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (time1 = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (time2 = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="addHandlerTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addHandlerTime"
                      show-time
                      placeholder="请选择开始处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addHandlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addHandlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endHandlerTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endHandlerTime"
                      show-time
                      placeholder="请选择结束处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addHandlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addHandlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addHandlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPaymentAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addPaymentAmount"
                        placeholder="开始订单金额"
                      />
                      <a-input
                        hide-button
                        v-model="form.endPaymentAmount"
                        placeholder="结束订单金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="changeOrderList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="changeOrderList" @click="reset"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button v-permission="esportChangeOrderList" @click="cardBalanceExports" type="outline">
            <template #default>导出</template>
          </a-button>
          <a-button @click="processVisible = true" type="outline">
            <template #default>批量审核</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :scroll="scroll"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'newCard'" #cell="{ record }">
                <div class="ba" v-if="record.newCard">
                  <span
                    @click="useCommon.routerOne(record.newCard.card)"
                    v-if="record.newCard.card.length >= 20"
                    class="card-number"
                    >{{ record.newCard.card }}</span
                  >
                  <span @click="useCommon.routerOne(record.newCard.card)" v-else>{{
                    record.newCard.card
                  }}</span>
                </div>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'srcCard'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span
                    @click="useCommon.routerOne(record.srcCard.card)"
                    v-if="record.srcCard.card.length >= 20"
                    class="card-number"
                    >{{ record.srcCard.card }}</span
                  >
                  <span @click="useCommon.routerOne(record.srcCard.card)" v-else>{{
                    record.srcCard.card
                  }}</span>
                </div>
              </template>
              <template v-if="item.key === 'payAmount'" #cell="{ record }">
                {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}元
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag v-if="record.state == 0">等待审核</a-tag>
                <a-tag color="#ffb400" v-if="record.state == 1">正在审核</a-tag>
                <a-tag color="blue" v-if="record.state == 2">审核成功</a-tag>
                <a-tag color="red" v-if="record.state == 3">审核驳回</a-tag>
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <div v-if="record.type == 0"> 支付宝</div>
                <div v-if="record.type == 1"> 微信</div>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.srcUser">{{ record.srcUser.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'species'" #cell="{ record }">
                <span v-if="record.species">{{ record.species }}</span>
                <span v-else>- - - </span>
              </template>
              <template v-else-if="item.key === 'logisticNumber'" #cell="{ record }">
                <span v-if="record.logisticNumber">{{ record.logisticNumber }}</span>
                <span v-else>- - - </span>
              </template>
              <template v-else-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>- - - </span>
              </template>
              <template v-else-if="item.key === 'handlerTime'" #cell="{ record }">
                <span v-if="record.handlerTime">{{ record.handlerTime }}</span>
                <span v-else>- - - </span>
              </template>
              <template v-else-if="item.key === 'handlerRemarks'" #cell="{ record }">
                <span v-if="record.handlerRemarks">{{ record.handlerRemarks }}</span>
                <span v-else>- - - </span>
              </template>

              <!-- <template v-else-if="item.key === 'srcchannel'" #cell="{ record }">
                <span>{{ record.srcSeries.channel.name }}</span>
              </template>
              <template v-else-if="item.key === 'srcSeries'" #cell="{ record }">
                <span>{{ record.srcSeries.name }}</span>
              </template>
              <template v-else-if="item.key === 'newchannel'" #cell="{ record }">
                <span v-if="record.newSeries">{{ record.newSeries.channel.name }}</span>
              </template>
              <template v-else-if="item.key === 'newSeries'" #cell="{ record }">
                <span v-if="record.newSeries">{{ record.newSeries.name }}</span>
              </template> -->
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    v-permission="handlerChangeOrder"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="openState(record)"
                    >处理</a-button
                  >
                  <a-button
                    v-permission="deleteChangeOrder"
                    @click="deleteFn(record)"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    status="warning"
                    >移除</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <!-- <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：支付金额:{{ Math.floor(numForm.paymentAmount * 100) / 100 }}元
          <span style="margin-left: 10px"
            >券包数量:{{ Math.floor(numForm.couponCount * 100) / 100 }}元</span
          >
          <span style="margin-left: 10px"
            >券包金额: {{ Math.floor(numForm.couponAmount * 100) / 100 }}元</span
          >
        </div> -->
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 修改状态 -->
    <a-modal
      v-model:visible="stateVisible"
      @before-close="closeState"
      title="修改状态"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="stateRef" :model="stateFrom">
        <a-form-item field="state" label="换卡状态">
          <a-select v-model="stateFrom.state" placeholder="请选择换卡状态" allow-clear>
            <a-option :value="0">等待审核</a-option>
            <!-- <a-option :value="1">正在审核</a-option> -->
            <a-option :value="2">审核成功</a-option>
            <a-option :value="3">审核驳回</a-option>
            <a-option :value="4">退款</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="logisticNumber"
          v-if="stateFrom.state == 2"
          :rules="[{ required: true, message: '快递单号不能为空' }]"
          label="快递单号"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.logisticNumber" placeholder="请输入快递单号" allow-clear />
        </a-form-item>
        <a-form-item
          field="card"
          v-if="stateFrom.state == 2"
          :rules="[{ required: true, message: '新卡号不能为空' }]"
          label="新卡号"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.card" placeholder="请输入新卡号" allow-clear />
        </a-form-item>
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="自动划卡">
          <a-radio-group v-model="stateFrom.user" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div
              >旧卡所属的客户是哪个客户，新卡也会是哪个客户，请注意新卡必须归属管理员才能自动划卡，如果失败将会跳过</div
            >
          </template>
        </a-form-item>
        <!-- <a-form-item field="value1" v-if="stateFrom.state == 2" label="短信通知">
          <a-radio-group v-model="flowForm.type" class="radio-bcg">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>换卡成功后，将会给客户发送换卡成功的短信</div>
          </template>
        </a-form-item> -->
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="流量转移">
          <a-radio-group v-model="stateFrom.order" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的流量转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="余额转移">
          <a-radio-group v-model="stateFrom.balance" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的余额转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="券包转移">
          <a-radio-group v-model="stateFrom.coupon" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="会员转移">
          <a-radio-group v-model="stateFrom.speedVip" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="value1" v-if="stateFrom.state == 2" label="实名转移">
          <a-radio-group v-model="stateFrom.realName" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item
          field="refundType"
          v-if="stateFrom.state == 4"
          :rules="[{ required: true, message: '退款类型不能为空' }]"
          label="退款类型"
          asterisk-position="end"
        >
          <a-select v-model="stateFrom.refundType" placeholder="请选择退款类型" allow-clear>
            <a-option value="0">标记退款</a-option>
            <a-option value="1">原路退回</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="refundAmount"
          v-if="stateFrom.state == 4"
          :rules="[{ required: true, message: '退款金额不能为空' }]"
          label="退款金额"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.refundAmount" placeholder="请输入退款金额" allow-clear />
        </a-form-item>
        <a-form-item field="handlerRemarks" label="处理备注">
          <a-textarea
            v-model="stateFrom.handlerRemarks"
            placeholder="请输入处理备注"
            allow-clear
          /> </a-form-item
      ></a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeState">取消</a-button>
          <a-button type="primary" @click="updateState">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 批量审核 -->
    <a-modal
      v-model:visible="processVisible"
      @before-close="colse1"
      title="批量审核"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="details" :model="detail">
        <a-form-item field="value1" label="上传模板">
          <a-row :gutter="20">
            <a-col :span="10">
              <a-button class="width100" @click="download">下载处理模板</a-button>
            </a-col>
            <a-col :span="4">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-upload
                style="width: 100%"
                ref="sslUs"
                action="/app/card/change/order/import/excel"
                :limit="1"
                @success="onSuccessBcg"
                @error="onError"
                :file-list="file"
              >
                <template #upload-button>
                  <a-button style="width: 100%" type="primary" class="width100"
                    >导入处理文件</a-button
                  >
                </template>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item field="state" label="换卡状态">
          <a-select v-model="flowForm.state" placeholder="请选择换卡状态" allow-clear>
            <a-option :value="0">等待审核</a-option>
            <!-- <a-option :value="1">正在审核</a-option> -->
            <a-option :value="2">审核成功</a-option>
            <a-option :value="3">审核驳回</a-option>
            <a-option :value="4">退款</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="user" label="自动划卡">
          <a-radio-group v-model="flowForm.user" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div
              >旧卡所属的客户是哪个客户，新卡也会是哪个客户，请注意新卡必须归属管理员才能自动划卡，如果失败将会跳过</div
            >
          </template>
        </a-form-item>
        <!-- <a-form-item field="value1"  label="短信通知">
          <a-radio-group v-model="flowForm.type" class="radio-bcg">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>换卡成功后，将会给客户发送换卡成功的短信</div>
          </template>
        </a-form-item> -->
        <a-form-item field="order" label="流量转移">
          <a-radio-group v-model="flowForm.order" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的流量转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="balance" label="余额转移">
          <a-radio-group v-model="flowForm.balance" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的余额转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="coupon" label="券包转移">
          <a-radio-group v-model="flowForm.coupon" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="speedVip" label="会员转移">
          <a-radio-group v-model="flowForm.speedVip" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="realName" label="实名转移">
          <a-radio-group v-model="flowForm.realName" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">是</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">否</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div>旧卡的券包转移到新卡</div>
          </template>
        </a-form-item>
        <a-form-item field="handlerRemarks" label="处理备注">
          <a-textarea
            :disable="!loadingsa"
            v-model="flowForm.handlerRemarks"
            placeholder="请输入处理备注"
            allow-clear
          />
        </a-form-item>
        <!-- <a-form-item :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-button
                html-type="submit"
                :loading="loadingsa"
                type="primary"
                class="width100"
                @click="changeUp"
                >确认审核</a-button
              >
            </a-col>
          </a-row>
        </a-form-item> -->
        <a-form-item v-if="count > 0" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-row style="margin-bottom: 10px">
                <a-col :span="6"> 卡板数量:{{ upList.length }} </a-col>
                <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
              </a-row>
            </a-col>

            <a-col :span="24" style="margin-bottom: 10px">
              <a-progress
                :show-text="false"
                size="large"
                :percent="(zong.success + zong.error) / upList.length"
              />
            </a-col>

            <a-col :span="24">
              <div
                style="
                  width: 100%;
                  height: 100px;
                  background-color: #f2f3f5;
                  overflow-y: scroll;
                  padding: 0 15px;
                "
              >
                <div v-for="item in errorList" :key="item">
                  {{ item }}
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="colse1">取消</a-button>
          <a-button type="primary" @click="changeUp">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="batchJian"
      @before-close="batchJian = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 检测结果 </template>
      <div v-if="upList.length > 1000">
        <a-alert type="warning" :show-icon="false">
          <div style="font-size: 13px">
            正在进行操作卡板，换卡总数量{{
              upList.length
            }}张，该操作不可逆，一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            我确认操作总数量{{ upList.length }}张卡的换卡，确认操作无误</div
          >
        </a-alert>
        <a-input
          v-model="batchValue"
          style="margin-top: 20px"
          placeholder="请输入'确认操作'后，点击确定"
          :error="error"
          onpaste="return false"
        />
        <div style="font-size: 13px; margin-top: 10px"
          >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
        >
      </div>
      <div v-else>
        <a-alert type="warning" :show-icon="false">
          <div style="text-align: center; font-size: 13px"
            >换卡卡号数据：换卡数量：<span style="color: #3491fa">{{ upList.length }}张</span></div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            操作时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
          >
        </a-alert>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="batchJian = false">取消</a-button>
          <a-button type="primary" @click="batchQue">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import {
    changeOrderList,
    deleteChangeOrder,
    handlerChangeOrder,
    esportChangeOrderList,
    changeExcel,
  } from '@/api/url'
  import useCommonStore from '@/store/modules/common'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { formpost, get } from '@/api/http'
  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')
  const table = useTable()
  const useCommon = useCommonStore()
  const channel: any = ref([])
  const series: any = ref([])
  const visible = ref(false)
  const visibles = ref(false)
  const details = ref()
  const card = ref('')
  const cardsVisible = ref(false)
  const ast = ref(0)
  const processVisible = ref(false)
  const stateVisible = ref(false)
  const typeTexts = ref('')
  const type = ref('outTradeNo')
  const batchJian = ref(false)
  const batchValue = ref('')
  const file = ref([])
  const flowForm = ref({
    order: true,
    balance: true,
    user: true,
    realName: true,
    coupon: true,
    speedVip: true,
    state: 2,
    handlerRemarks: '',
  })
  const zong = ref({
    success: 0,
    error: 0,
  })
  const typeLists = ref([
    {
      name: '订单号',
      value: 'outTradeNo',
    },
    {
      name: '旧卡号',
      value: 'srcCard',
    },
    {
      name: '新卡号',
      value: 'newCard',
    },
    {
      name: '收货姓名',
      value: 'name',
    },
    {
      name: '收货电话',
      value: 'phone',
    },
    {
      name: '快递单号',
      value: 'logisticNumber',
    },
  ])
  const typeTime = ref('1')
  const typeListTime = ref([
    {
      name: '申请时间',
      value: '1',
    },
    {
      name: '处理时间',
      value: '2',
    },
  ])
  const time1 = ref('')
  const time2 = ref('')
  const stateRef = ref()
  const scroll = {
    x: 1500,
  }
  const upList = ref([])
  const stateFrom = ref({
    id: 0,
    state: 2,
    card: '',
    logisticNumber: '',
    handlerRemarks: '',
    refundType: '',
    refundAmount: '',
    order: true,
    balance: true,
    user: true,
    realName: true,
    coupon: true,
    speedVip: true,
  })
  const detail: any = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
    series: { name: '执行程序', channel: { name: '迎梦云-老郭' } },
  })

  const typeText: any = ref('')
  const userList: any = ref([])

  const loading = ref(false)
  const form = ref({
    type: '',
    outTradeNo: '', //       商户订单号
    tradeNo: '', //          支付订单号
    logisticNumber: '', //    快递单号
    srcCard: '', //         老卡号
    newCard: '', //         新卡号
    name: '', //           收货人姓名
    phone: '', //           收货人手机号
    state: '', //          订单状态 0等待 1正在 2成功 3驳回 4退款 请参考 {@link CardChangeOrderStateConstants#getState()}
    ip: '', //           ip
    srcUserId: '', //       原用户ID
    newUserId: '', //       新用户ID
    srcChannelId: '', //     原渠道ID
    newChannelId: '', //     新渠道ID
    srcSeriesId: '', //     原系列ID
    newSeriesId: '', //     新系列ID
    addPaymentAmount: '', //  开始订单金额
    endPaymentAmount: '', //  结束订单金额
    addApplyTime: '', //    开始申请订单时间
    endApplyTime: '', //     结束申请订单时间
    addHandlerTime: '', //    开始处理时间
    endHandlerTime: '', //   结束订单时间
    payTemplateId: '',
  })
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const tableColumns: any = reactive({
    list: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 150,
      },
      {
        title: '旧卡号',
        key: 'srcCard',
        dataIndex: 'srcCard',
        checked: true,
        width: 210,
      },
      {
        title: '新卡号',
        key: 'newCard',
        dataIndex: 'newCard',
        checked: true,
        width: 210,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 130,
      },
      {
        title: '换卡卡种',
        key: 'species',
        dataIndex: 'species',
        checked: true,
        width: 130,
      },
      {
        title: '换卡状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 130,
      },
      {
        title: '收货姓名',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 130,
      },
      {
        title: '收货电话',
        key: 'phone',
        dataIndex: 'phone',
        checked: true,
        width: 130,
      },

      {
        title: '收货地址',
        key: 'address',
        dataIndex: 'address',
        checked: true,
        width: 300,
      },
      {
        title: '申请备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 200,
      },
      {
        title: '快递单号',
        key: 'logisticNumber',
        dataIndex: 'logisticNumber',
        checked: true,
        width: 200,
      },
      {
        title: '申请时间',
        key: 'applyTime',
        dataIndex: 'applyTime',
        checked: true,
        width: 200,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        checked: true,
        width: 200,
      },
      {
        title: '处理备注',
        key: 'handlerRemarks',
        dataIndex: 'handlerRemarks',
        checked: true,
        width: 200,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 110,
        align: 'center',
        checked: true,
      },
    ],
  })

  const reset = () => {
    form.value = {
      type: '',
      outTradeNo: '', //       商户订单号
      tradeNo: '', //          支付订单号
      logisticNumber: '', //    快递单号
      srcCard: '', //         老卡号
      newCard: '', //         新卡号
      name: '', //           收货人姓名
      phone: '', //           收货人手机号
      state: '', //          订单状态 0等待 1正在 2成功 3驳回 4退款 请参考 {@link CardChangeOrderStateConstants#getState()}
      ip: '', //           ip
      srcUserId: '', //       原用户ID
      newUserId: '', //       新用户ID
      srcChannelId: '', //     原渠道ID
      newChannelId: '', //     新渠道ID
      srcSeriesId: '', //     原系列ID
      newSeriesId: '', //     新系列ID
      addPaymentAmount: '', //  开始订单金额
      endPaymentAmount: '', //  结束订单金额
      addApplyTime: '', //    开始申请订单时间
      endApplyTime: '', //     结束申请订单时间
      addHandlerTime: '', //    开始处理时间
      endHandlerTime: '', //   结束订单时间
      payTemplateId: '',
    }
    typeTexts.value = ''
    time1.value = ''
    time2.value = ''
    doRefresh(1)
  }

  function download() {
    // window.location.href = changeExcel
    window.location.assign(changeExcel)
  }

  //背景图上传
  const onSuccessBcg = (fileItem: any) => {
    upList.value = fileItem.response.data
  }

  function onError(fileItem: any) {
    Message.error(fileItem.response.msg)
  }

  const openState = (val: any) => {
    if (val.state == 2 || val.state == 3 || val.state == 4) {
      Message.error('已处理,请勿重复处理')
    } else {
      stateFrom.value.refundAmount = val.paymentAmount
      stateFrom.value.id = val.id
      stateVisible.value = true
    }
  }
  const closeState = () => {
    stateRef.value.resetFields()
    stateVisible.value = false
  }
  const updateState = () => {
    stateRef.value.validate((error: any) => {
      if (!error) {
        formpost({
          url: handlerChangeOrder,
          data: () => {
            return {
              ...stateFrom.value,
            }
          },
        })
          .then((res) => {
            Message.success(res.msg)
            closeState()
            doRefresh()
          })
          .catch(console.log)
      }
    })
  }
  const numForm: any = ref({})
  function numFn() {
    formpost({
      url: '/app/coupon/order/list/statistics',
      data: {
        ...form.value,
      },
    }).then((res) => {
      numForm.value = res.data
    })
  }
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form.value[type.value] = typeTexts.value
    if (typeTime.value == '1') {
      form.value.addApplyTime = time1.value
      form.value.endApplyTime = time2.value
    } else if (typeTime.value == '2') {
      form.value.addHandlerTime = time1.value
      form.value.endHandlerTime = time2.value
    }
    get({
      url: changeOrderList,
      data: {
        page: pagination.page,
        size: pagination.pageSize,
        ...form.value,
      },
    })
      .then((res) => {
        tableLoading.value = false
        // numFn()
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }

  const errorList = ref([])

  const count = ref(0)
  const loadingsa = ref(false)
  function changeUp() {
    if (upList.value.length <= 0) {
      Message.error('换卡数据不能为空')
    } else {
      errorList.value = []
      count.value = 0
      batchJian.value = true
    }
  }

  function batchQue() {
    if (upList.value.length > 1000) {
      if (batchValue.value == '确认操作') {
        loadingsa.value = true
        requestApis(handlerChangeOrder, upList.value[count.value])
        batchJian.value = false
      } else {
        Message.error('请先确认操作')
      }
    } else {
      batchJian.value = false
      loadingsa.value = true
      requestApis(handlerChangeOrder, upList.value[count.value])
    }
  }

  function requestApis(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    console.log(card)
    const formData = new FormData()
    formData.append('id', card.id)
    formData.append('card', card.newCard)
    formData.append('logisticNumber', card.logisticNumber)
    formData.append('state', flowForm.value.state)
    formData.append('balance', flowForm.value.balance)
    formData.append('order', flowForm.value.order)
    formData.append('user', flowForm.value.user)
    formData.append('realName', flowForm.value.realName)
    formData.append('coupon', flowForm.value.coupon)
    formData.append('speedVip', flowForm.value.speedVip)
    formData.append('handlerRemarks', flowForm.value.handlerRemarks)
    fetch(item, {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((res) => {
        count.value++ // 增加计数器
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        if (count.value < upList.value.length) {
          flowForm.value.id = upList.value[count.value].id
          requestApis(handlerChangeOrder, upList.value[count.value])
        } else {
          file.value = []
          loadingsa.value = false
          flowForm.value.handlerRemarks = ''
          upList.value = []
        }
        errorList.value.unshift(card.id + ':' + (res.status == true ? '操作成功' : res.msg))
      })
      .catch((error) => {
        count.value++ // 增加计数器
        console.log('Error:', error)
        if (count.value <= upList.value.length) {
          flowForm.value.id = upList.value[count.value].id
          requestApis(`/app/order/pay`, upList.value[count.value])
        }
      })
  }

  function typeFn() {
    form.value.outTradeNo = ''
    form.value.srcCard = ''
    form.value.newCard = ''
    form.value.name = ''
    form.value.phone = ''
    form.value.logisticNumber = ''
  }
  function typeFns() {
    form.value.addApplyTime = ''
    form.value.endApplyTime = ''
    form.value.addHandlerTime = ''
    form.value.endHandlerTime = ''
  }

  const colse = () => {
    ast.value = 0
    cardsVisible.value = false
  }
  const colse1 = () => {
    upList.value = []
    loadingsa.value = false
    count.value = 0
    file.value = []
    details.value.resetFields()
    processVisible.value = false
  }
  const open = (val: any) => {
    ast.value = val
    cardsVisible.value = true
  }
  const cardBalanceExports = () => {
    loading.value = true
    form.value[type.value] = typeTexts.value
    if (typeTime.value == '1') {
      form.value.addApplyTime = time1.value
      form.value.endApplyTime = time2.value
    } else if (typeTime.value == '2') {
      form.value.addHandlerTime = time1.value
      form.value.endHandlerTime = time2.value
    }
    useCommon
      .downLoads(esportChangeOrderList, form.value, '换卡订单列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  function cardsFn() {
    const arr = card.value.split(/\n/g)
    if (ast.value == 0) {
      typeText.value = arr.toString()
    } else {
      form.value.card = arr.toString()
    }
    cardsVisible.value = false
  }
  const detailFn = (val: any) => {
    detail.value = JSON.parse(JSON.stringify(val))
    visible.value = true
  }

  const deleteFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认执行此操作？',
      onOk: () => {
        get({
          url: deleteChangeOrder,
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }

  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
      console.log(userList)
    })
  }

  function getchannel() {
    useCommon.channels1().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }
  const meal: any = ref([])
  function getMeal() {
    useCommon.mealListFn().then((res: any) => {
      meal.value = res.data
    })
  }

  const templateS: any = ref([])
  function getLists() {
    useCommon.templatesListFn(true).then((res: any) => {
      templateS.value = res.data
    })
  }

  onMounted(async () => {
    await doRefresh()
    await getList()
    await getchannel()
    await getseries()
    await getMeal()
    await getLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-form-item-content-flex) {
    display: block;
  }
  :deep(.arco-upload) {
    width: 100%;
  }
  .hide {
    display: none;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
</style>
